<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
    <link href="/css/common.css" rel="stylesheet" type="text/css">
    <link href="/css/search.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="search-box" id="search">
        <div class="header">
            <div>
                <p class="banner"><span @click="toOther(info.role ? '/admin' : '/master')">社区空间</span><span
                        @click="toOther('/index')">聊天室</span><span class="actived">用户</span></p>
                <div class="name" @click="toOther('/info')"><img :src="info.picture" /><span>{{info.nick}}</span></div>
            </div>
        </div>

        <div class="search-main">
            <div class="search-main-content">
                <div class="search-box-main">
                    <div class="search-item"> 
                        <div class="sex-box">
                            <label>男： <input type="radio" :checked="sex == 1" name="sex" value="1" @click="checkedSex(1)"/></label>
                            <label>女： <input type="radio" :checked="sex == 0" name="sex" value="0" @click="checkedSex(0)"/></label>
                        </div>
                        <div class="age-box">
                            <span>年龄</span>
                            <input type="number" v-model="age1"/>-<input type="number" v-model="age2"/>
                        </div>
                    </div>
                    <div class="search">
                        <input placeholder="请输入搜索项" v-model="name" @change="change"/>
                        <div class="search-button"> <img src="../../images/search.png" /><span @click="search">搜索</span></div>
                    </div>
                </div> 
                <ul class="people">
                    <li v-for="(item, index) in list" :key="item.staffId" @click="toIndex(item.staffId)" style="position: relative;">
                        <span v-if="item.isRecommand == 1"  class="recommand">推荐</span>
                        <img :src="item.picture ? item.picture : '/images/people.png'" />
                        <p>{{item.nick}}</p>
                        <p class="name">{{item.email ? item.email : '暂无邮箱'}}</p>
                        <p class="details">{{item.selfDesc ? item.selfDesc : '还没有内容哦'}}</p>
                        <p v-if="show" class="oper"><button @click="oper(item.status, item.staffId)">{{item.status == 1 ? '启用' : '禁用'}}</button></p>
                    </li>
                </ul>

            </div>
        </div>

        <div class="footer"></div>
    </div>
    <script src="/tools/vue.js"></script>
    <script src="/tools/http.js"></script>
    <script>
        new Vue({
            el: '#search',
            data() {
                return {
                    info: {
                        nick: '',
                        picture: '',
                        role: '',
                   
                    },
                    list: [],
                    name: '',
                    age1: '',
                    age2: '',
                    sex: '0',
                    show: false,
                    status:0,
                }
            },
            created() {
                this.getInfo();
                this.getPeople();
            },
            methods: {
                change() {
                  this.getPeople();
                },
                checkedSex(value) {
                    this.sex = value;
                },
                toOther(url) {
                    if(this.status == 0){
                        window.location.href= url
                    }else{
                        if(url == '/index'){
                            alert("账户被禁用，无法进行聊天")
                        }else{
                            window.location.href= url
                        }
                    }
                },
                toIndex(id) {
                    let url = this.info.role ? '/admin' : '/master';
                    window.location.href= url + '?id=' + id 
                },
                search() {
                    this.getPeople(this.name);
                },
                oper(status, staffId) {
                    let url = status == 1 ? '/unForbid' : '/forbid';
                    let that = this;
                    ajax({
                        type: 'get',
                        url,
                        data: {
                            staffId
                        },
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            console.log(res, 'res')
                            if(res.code == 200 ) {
                                that.getPeople(that.name);
                            }
                        }
                    })

                },
                getInfo() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/myInfo',
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            if(res.code == 200 ) {
                                that.info.role = res.data.role ? true : false;
                                that.info.nick = res.data.nick;
                                that.info.picture = res.data.picture ? res.data.picture : '/images/people.png'
                                that.show = res.data.role ? true : false;
                                that.status = res.data.status
                            }
                        }
                    })
                },
                getPeople() {
                    let that = this;
                    ajax({
                        type: 'get',
                        url: '/searchStaff',
                        data: {
                            name: that.name,
                            sex: that.sex,
                            age1: that.age1,
                            age2: that.age2
                        },
                        success(result) {
                            // 需要进入到聊天室   /index
                            let res = JSON.parse(result)
                            // /info  /search   /master 主页
                            if(res.code == 200 ) {
                                that.list = res.data;
                            }
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>